<!--
 Copyright 2021 cbtpro
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/styles/default.css" />
  <link rel="stylesheet" href="./assets/@shoelace-style/shoelace/dist/themes/light.css" />
  <script type="module" src="./assets/@shoelace-style/shoelace/dist/shoelace.js"></script>
  <title>资源下载</title>
  <link href="./assets/styles/default.css" />
  <style>
    .container {
      width: calc(100vw - 40px);
      display: flex;
      flex-wrap: wrap;
    }
    .card-overview {
      max-width: 300px;
      margin: 10px;
      display: flex; 
      justify-content: space-between; 
      align-items: center;
    }
    .card-overview [slot="image"] {
      width: 280px;
      height: 280px;
      padding: 10px;
    }
    .card-overview [name="title"] {
      color: #000;
      font-size: 16px;
    }
    .card-overview [slot="footer"] {
      display: flex; 
      justify-content: space-between; 
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <sl-card class="card-overview">
      <img
        slot="image" 
        src="./assets/logo/vue.svg" 
        alt="vue图标"
      >
      <strong name="title">vue-devtools_6_6_1</strong><br>
      <sl-tag type="primary">chrome</sl-tag>
      <sl-tag type="primary">crx</sl-tag>
      <sl-tag type="primary">devtools</sl-tag>
      <br>
      <div slot="footer">
        <a href="https://www.crx4chrome.com/crx/11903/" target="_blank" rel="noopener">
          <sl-button type="primary" pill>Crx4Chrome.com</sl-button>
        </a>
      </div>
    </sl-card>
    <sl-card class="card-overview">
      <img
        slot="image"
        src="./assets/logo/vue.svg"
        alt="vue图标"
      >
      <strong name="title">vue-devtools_6_5_0</strong><br>
      <sl-tag type="primary">chrome</sl-tag>
      <sl-tag type="primary">crx</sl-tag>
      <sl-tag type="primary">devtools</sl-tag>
      <br>
      <div slot="footer">
        <a href="https://www.crx4chrome.com/crx/339029/" target="_blank" rel="noopener">
          <sl-button type="primary" pill>Crx4Chrome.com</sl-button>
        </a>
        <a href="./assets/crx/vue-devtools_6_5_0.crx" target="_blank" alt="vue-devtools 6.5.0">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>
    <sl-card class="card-overview">
      <img
        slot="image"
        src="./assets/logo/vue.svg"
        alt="vue-devtools 5.3.4"
      >
      <strong name="title">vue-devtools 5.3.4</strong><br>
      <sl-tag type="primary">chrome</sl-tag>
      <sl-tag type="primary">crx</sl-tag>
      <sl-tag type="primary">devtools</sl-tag>
      <br>
      <div slot="footer">
        <a href="./assets/crx/vue-devtools_5_3_4_0.crx" target="_blank" alt="vue-devtools 5.3.4">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>
    <sl-card class="card-overview">
      <img
        slot="image"
        src="./assets/logo/vue.svg"
        alt="postman-interceptor 1.1.2"
      >
      <strong name="title">postman-interceptor 1.1.2</strong><br>
      <sl-tag type="primary">chrome</sl-tag>
      <sl-tag type="primary">crx</sl-tag>
      <sl-tag type="primary">devtools</sl-tag>
      <br>
      <div slot="footer">
        <a href="./assets/crx/postman-interceptor-1.1.2.crx" target="_blank" alt="postman-interceptor 1.1.2">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>
    <sl-card class="card-overview">
      <img
        slot="image"
        src="./assets/logo/vue.svg"
        alt="vue-devtools_6_0_0_19.crx"
      >
      <strong name="title">vue-devtools_6_0_0_19.crx</strong><br>
      <sl-tag type="primary">chrome</sl-tag>
      <sl-tag type="primary">crx</sl-tag>
      <sl-tag type="primary">devtools</sl-tag>
      <br>
      <div slot="footer">
        <a href="./assets/crx/vue-devtools_6_0_0_19.crx" target="_blank" alt="vue-devtools_6_0_0_19.crx">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>
    <sl-card class="card-overview">
      <img
        slot="image"
        src="./assets/logo/vue.svg"
        alt="cookie-master"
      >
      <strong name="title">cookie-master.zip</strong><br>
      <sl-tag type="primary">chrome</sl-tag>
      <sl-tag type="primary">crx</sl-tag>
      <sl-tag type="primary">devtools</sl-tag>
      <br>
      <div slot="footer">
        <a href="./assets/crx/cookie-master.zip" target="_blank" alt="cookie-master.zip">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>

    <sl-card class="card-overview">
      <img
        slot="image"
        src="./assets/logo/vue.svg"
        alt="Pro Git book zh.pdf"
      >
      <strong name="title">Pro Git book zh</strong><br>
      <sl-tag type="primary">git</sl-tag>
      <sl-tag type="primary">pdf</sl-tag>
      <sl-tag type="primary">简体中文</sl-tag>
      <br>
      <div slot="footer">
        <a href="./assets/book/Pro Git book zh.pdf" target="_blank" alt="Pro Git book zh.pdf">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>
    <sl-card class="card-overview">
      <img
        slot="image" 
        src="./assets/logo/vue.svg" 
        alt="Pro Git book en"
      >
      <strong name="title">Pro Git book en</strong><br>
      <sl-tag type="primary">git</sl-tag>
      <sl-tag type="primary">pdf</sl-tag>
      <sl-tag type="primary">英文原版</sl-tag>
      <br>
      <div slot="footer">
        <a href="./assets/book/progit.pdf" target="_blank" alt="progit.pdf">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>

    <sl-card class="card-overview">
      <img
        slot="image"
        src="./assets/logo/react.svg"
        alt="React_Developer_Tools_5_0_2_0.crx"
      >
      <strong name="title">React Developer Tools 5.0.2.0</strong><br>
      <sl-tag type="primary">chrome</sl-tag>
      <sl-tag type="primary">crx</sl-tag>
      <sl-tag type="primary">devtools</sl-tag>
      <br>
      <div slot="footer">
        <a href="./assets/crx/React_Developer_Tools_FMKADMAPGOFADOPLJBJFKAPDKOIENIHI_5_0_2_0.crx" target="_blank" alt="React_Developer_Tools_5_0_2_0.crx">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>

    <sl-card class="card-overview">
      <img
        slot="image"
        src="./assets/logo/redux.svg"
        alt="Redux DevTools 3.1.6.0"
      >
      <strong name="title">Redux DevTools 3.1.6.0</strong><br>
      <sl-tag type="primary">chrome</sl-tag>
      <sl-tag type="primary">crx</sl-tag>
      <sl-tag type="primary">devtools</sl-tag>
      <br>
      <div slot="footer">
        <a href="./assets/crx/Redux_DevTools_LMHKPMBEKCPMKNKLIOEIBFKPMMFIBLJD_3_1_6_0.crx" target="_blank" alt="Redux DevTools 3.1.6.0">
          <sl-button type="primary" pill>下载</sl-button>
        </a>
        <!-- <sl-rating></sl-rating> -->
      </div>
    </sl-card>
  </div>
</body>
</html>
